<template>
  <div class="industry-detail">
    <div class="header-container">
      <img @click="goBack" class="back-arrow" :src="backArrow" alt="" />
      <div class="header-title">
        <span>{{ industryName }}</span>
        <img
          class="follow-img"
          @click="handleCollect"
          :src="!isCollect ? unFollow : noBorderYellowStar"
        />
      </div>
    </div>
    <div class="tab-list">
      <div
        class="tab-item"
        :class="activeTabIndex == index ? 'active-tab' : ''"
        v-for="(item, index) in filterTabList"
        :key="index"
        @click="changeActiveTab(item, index)"
      >
        {{ item.title }}
      </div>
    </div>
    <div class="container" :class="activeTabIndex == 0 ? 'bottom-dis' : ''">
      <keep-alive>
        <component
          :is="activeComponent"
          :industryId="industryId"
          :industryName="industryName"
        ></component>
      </keep-alive>
    </div>
  </div>
</template>

<script setup>
import {
  ref,
  onMounted,
  onUnmounted,
  defineAsyncComponent,
  shallowRef,
} from 'vue';
import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router';
import { onBackPressed } from '@/utils/androidFn.js';
import { openConsole } from '@/utils/industryUtils.js';
import { showToast } from 'vant';
import {
  campusCollect,
  getFollowIndustryReq,
  campusIsCollect,
} from '@/api/industryMap.js';
import backArrow from '@/assets/images/back_arrow.png';
import noBorderYellowStar from '@/assets/images/noBorderYellowStar.png';
import unFollow from '@/assets/images/industryMap/unFollowBlue.png';

const BaseInfo = defineAsyncComponent(() =>
  import('@/views/industryMap/industryDetail/components/BaseInfo.vue')
);
const RepresentCompany = defineAsyncComponent(() =>
  import('@/views/industryMap/industryDetail/components/RepresentCompany.vue')
);
const RepresentMajor = defineAsyncComponent(() =>
  import('@/views/industryMap/industryDetail/components/RepresentMajor.vue')
);

defineOptions({
  name: 'IndustryDetail',
  beforeRouteEnter(to, from, next) {
    const fromName = from.name ? from.name.toLowerCase() : '';
    switch (fromName) {
      case 'majordetail':
        localStorage.setItem('industryTab', 2);
        break;
      case 'iframesitepage':
        localStorage.setItem('industryTab', 1);
        break;
      default:
        localStorage.removeItem('industryTab');
        break;
    }
    next();
  },
});
openConsole();
const router = useRouter();
const route = useRoute();
const industryType = ref('');
const industryName = ref('');
const industryId = ref('');
const isCollect = ref(false);

const goBack = () => {
  window.history.state?.back ? router.go(-1) : onBackPressed(router);
};

const filterTabList = [
  {
    title: '产业概况',
    component: BaseInfo,
  },
  {
    title: '代表性企业',
    component: RepresentCompany,
  },
  {
    title: '代表性专业',
    component: RepresentMajor,
  },
];

const activeTabIndex = ref(0);
let activeComponent = shallowRef(BaseInfo);
const changeActiveTab = (item, index) => {
  activeTabIndex.value = index;
  activeComponent.value = item.component;
};

const handleCollect = async (val) => {
  const params = {
    dataId: industryId.value,
    dataType: 14,
    action: isCollect.value ? 0 : 1, // 1新增收藏  0取消收藏
  };
  const res = await campusCollect(params);
  if (res.code == 200) {
    showToast(params.action == 1 ? '收藏成功' : '已取消收藏');
    isCollect.value = params.action == 1 ? true : false;
  }
};
const checkFollow = async () => {
  const params = {
    dataId: industryId.value,
    dataType: 14,
  };
  const res = await campusIsCollect(params);
  if (res.code == 200) {
    isCollect.value = res.data;
  }
};

onMounted(() => {
  activeTabIndex.value = Number(localStorage.getItem('industryTab')) || 0;
  activeComponent.value = filterTabList[activeTabIndex.value].component;

  industryId.value = route.query.code;
  industryType.value = route.query.industryType;
  industryName.value = decodeURIComponent(route.query.name);
  checkFollow();
});
</script>

<style lang="scss" scoped>
div {
  box-sizing: border-box;
}
.industry-detail {
  height: 100vh;
  background: #dff0ff;
  display: flex;
  flex-direction: column;
  font-family: PingFangSC, PingFang SC;
  .header-container {
    margin-top: 26px;
    width: 100%;
    padding: 0px 60px;
    height: 88px;
    display: flex;
    align-items: center;
    .back-arrow {
      width: 48px;
      height: 48px;
    }
    .header-title {
      display: flex;
      align-items: center;
      padding-left: 24px;
      width: 100%;
      font-weight: bold;
      font-size: 28px;
      color: #000000;
    }
    .follow-img {
      width: 36px;
      height: 36px;
      margin-left: 24px;
    }
  }
  .tab-list {
    margin-top: 16px;
    display: flex;
    padding: 0 60px 0 82px;
    .tab-item {
      padding: 10px 73px;
      font-weight: bold;
      font-size: 24px;
      color: #000000;
      line-height: 33px;
      position: relative;
      &::after {
        content: '';
        position: absolute;
        top: 15px;
        right: 0;
        width: 2px;
        height: 24px;
        background: #bec9d7;
      }
      &:last-child::after {
        display: none;
      }
      &.active-tab {
        color: #ffffff;
        background: #0b6eff;
        border-radius: 18px 18px 0px 0px;
        &::after {
          display: none;
        }
      }
    }
  }
  .container {
    width: 100%;
    flex: 1;
    padding: 0 60px;
    border-radius: 20px 20px 0px 0px;
    background: #d4e6f9;
    overflow: hidden;
    &.bottom-dis {
      padding-bottom: 28px;
    }
  }
}
</style>
<style lang="scss">
.van-toast--text,
.van-toast--html {
  padding: 20px 24px !important;
}
</style>
